<div class="container-fluid">

<div class="col-md-5">

  <div class="input-group">
    <input name="Search" class="form-control" style="background-color: #ffffff" type="text" placeholder="Search" ng-model="controller.search"></input>

    <span class="input-group-btn" uib-dropdown>
      <button type="button" class="btn btn-default" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
        {$ controller.selectedPlatform || "All Platforms" $}
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" uib-dropdown-menu>
        <li ng-repeat="platform in controller.platforms">
          <a ng-click="controller.selectedPlatform = platform">{$ platform || "All Platforms" $}</a>
        </li>
      </ul>
    </span>

  </div>

  <div style="height: 150px; overflow-y: auto; overflow-x: hidden; border: 1px solid #dddddd; border-top: none">

    <table name="Artifacts" class="table table-condensed table-hover table-striped">
      <colgroup>
        <col width="100%"></col>
      </colgroup>

      <tbody>
        <tr ng-if="!controller.descriptorsError && controller.descriptors === undefined">
          <td>
            <i class="fa fa-spinner fa-spin fa-1"></i>
            <em>Loading artifacts...</em>
          </td>
        </tr>
        <tr ng-if="controller.descriptorsError" class="alert-danger danger">
          <td>
            <strong>Can't fetch artifacts list:</strong><br/>
            <span class="preserve-linebreaks">{$ controller.descriptorsError $}</span>
          </td>
        </tr>
        <tr ng-repeat="descriptor in controller.descriptorsList |
                       orderBy:'value.artifact.value.name.value' |
                       filter:controller.searchFilterRef |
                       filter:controller.platformFilterRef"
            ng-class="{'row-selected': descriptor.value.artifact.value.name ==
                      controller.selectedName}">
          <td style="cursor: pointer; border: none"
              ng-dblclick="controller.add(descriptor.value.artifact.value.name)"
              ng-click="controller.selectedName = descriptor.value.artifact.value.name">
            <div style="display:block" class="full-width-height"
                 ng-class="::{'custom-artifact': descriptor.value.is_custom.value === true}">
              {$ ::descriptor.value.artifact.value.name.value $}

              <span title="Custom Uploaded Artifact"
                    ng-if="::descriptor.value.is_custom.value === true">
                <i class="fa fa-user fa-1" aria-hidden="true"></i>
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div style="full-width">
    <div class="pull-left" style="padding-top: 1.5em">
      <p>Selected Artifacts:</p>
    </div>
    <div class="pull-right">
      <button class="btn btn-default btn-sm form-add" style="margin-top: 0.5em" name="Add"
              ng-click="controller.add(controller.selectedName)">
        Add
      </button>
    </div>
    <div class="clearfix"></div>
  </div>

  <div style="margin-top: 0em; height: 150px; overflow-y: auto; overflow-x: hidden; border: 1px solid #dddddd">

    <table name="SelectedArtifacts" class="table table-condensed table-hover table-striped">
      <colgroup>
        <col width="100%"></col>
      </colgroup>

      <tbody>
        <tr ng-if="value.length > 0"
            ng-repeat="name in value | orderBy:'value'"
            ng-class="{'row-selected': name == controller.selectedName}">
          <td style="cursor: pointer; border: none"
              ng-dblclick="controller.remove(name)"
              ng-click="controller.selectedName = name"
              ng-class="{'row-selected': name == controller.selectedName}">
            <div style="display:block" class="full-width-height">
              <strong>{$ ::name.value $}</strong>

              <span title="Custom Uploaded Artifact"
                    ng-if="::controller.descriptors[name.value].value.is_custom.value === true">
                <i class="fa fa-user fa-1" aria-hidden="true"></i>
              </span>
            </div>
          </td>
        </tr>
        <tr ng-if="value.length == 0">
          <td>
            <em>Use "Add" button or double-click to add artifacts to the list.</em>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="full-width" style="margin-top: 0.5em">
    <button class="btn btn-default btn-sm form-add" name="Add"
            ng-click="controller.clear()">
      Clear
    </button>

    <div class="pull-right">
      <button class="btn btn-default btn-sm form-add" name="Add"
              ng-click="controller.remove(controller.selectedName)">
        Remove
      </button>
    </div>
    <div style="cleafix"></div>
  </div>
</div>

<div name="ArtifactInfo" class="col-md-7"
     grr-force-refresh refresh-trigger="controller.selectedName.value">
  <grr-semantic-value value="controller.descriptors[controller.selectedName.value]" />
</div>

</div>
